@charset "utf-8";
@import "deta";

@function px($px){
    @return  ($px/2);
}

.web{
    width: 100%;
    height: 100%;
    position: relative;
    header{
           width: 100%;
           height: 75px;
           position: absolute;
           top: 0;
           >div{
                vertical-align: middle;
            }
            .logo{
                width: 62px;
                height: 62px;
                float: left;
                margin-left: 10px;
                margin-top: 8px;
                img{
                width: 100%;
                height: 100%;
                
                }
            }
            .searchBar{
                width: 132px;
                height: 25px;
                border: 1px solid #ff9344;
                border-radius:25px ;
                padding: 0 0 0 9px;
                margin: 0 auto;
                box-sizing: border-box;
                margin-top: 22px;
                input{
                    width:93px;
                    height: 100%;
                    border: none;
                    vertical-align: top;
                    font-size: 12px;
                    text-indent: 2px;
                
                
            }
            i{
                font-size: 14px;
                color: #ff9344;
                
            }
            }
            select{
                appearance: none;
                -webkit-appearance:none ;
                -moz-appearance: none;
                
            }
    }
    .selectBar{
                width: 80px;
                height:27px;
                border: 1px solid #ff9344;
                float: right;
                margin-right:11px;
                margin-top: 20px;
                i{
                height: 100%;
                width:25px;
                color: #ff9344;
                vertical-align: middle;
            }
            select{
                width: 53px;
                height: 100%;
                background: #FFFFFF;
                border: none;
            }
            }
            footer{
                width: 100%;
                height: 68px;
                position: absolute;
                bottom: 0;
            }
            section{
                width: 100%;
                position: absolute;
                top: 75px;
                bottom: 68px;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
            }
}


section {
    width: 100%;
        .lp{
            width: 100%;
            height: 142px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .zhuti1{
            width: 100%;
            height: px(92px);
            .zhuti1-1{
                width: px(350px);
                height: px(92px);
                img{
                    width: px(59px);
                    height: px(59px);
                    margin: 16px 3px 0 9px;
                    float: left;
                }
                span{
                    font-size: 16px;
                    margin-top: 18px;
                    margin-left: 5px;
                    float: left;
                }
            }
            .zhuti1-2{
                width: px(110px);
                height: px(24px);
                margin-top: px(38px);
                margin-right: 10px;
                
                .iconfont{
                    color: #ff9344;
                }
                span{
                    color: black;
                }
                a span:hover{
                    color: #cccccc;
                }
            }
        }
        .zhuti2{
            width: 100%;
            height: px(244px);
            .zhuti2-1{
                width: 80%;
                height: px(231px);
                margin: 0 auto;
                .zhuti22{
                    
                    ul{
                        li{
                            width: px(240px);
                            height:px(95px);
                            margin-top: 7px;
                            margin-bottom: 14px;
                            img{
                                width:100%;
                                height:100%;
                                
                            }
                        }
                    }
                }
                .zhuti33{
                    
                    ul{
                        li{
                            width: px(238px);
                            height:px(95px);
                            margin-top: 7px;
                            margin-bottom: 14px;
                           
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                        
                    }
                    
                }
            
        } 
    } 
    .zhuti3{
            width: 100%;
            height: px(86px);
            .zhuti3-1{
                width: px(350px);
                height: px(92px);
                img{
                    width: px(59px);
                    height: px(59px);
                    margin: 2px 3px 0 9px;
                    float: left;
                }
                span{
                    font-size: 16px;
                    margin-top: 7px;
                    margin-left: 5px;
                    float: left;
                }
            }
            .zhuti3-2{
                width: px(110px);
                height: px(24px);
                margin-top: px(18px);
                margin-right: 10px;
                
                .iconfont{
                    color: #ff9344;
                }
                span{
                    color: black;
                }
                a span:hover{
                    color: #cccccc;
                }
            }
        }
        
        .zhuti4{
            width: 100%;
            height: px(388px);
//          background: yellowgreen;
            margin: 0 auto;
            .zhuti4-1{
                width: 100%;
                height: 50%;
//              background: yellow;
                .zhuti4-1_1{
                    width: 35%;
                    height: 100%;
                    float: left;
                    img{
                 width: px(210px);
                 height: px(162px);
                 margin-left: 10px;
                    }
                }
                .zhuti4-1_2{
                    width: 65%;
                    height: px(62px);
//                  background: red;
                    .zhtl1{
                        h2{
                           font-size: 16px;
                           display: inline-block;
                           margin-top: 18px;
                        }
                        span{
                            float: right;
                            margin-top: 18px;
                            color: #b3b3b3;
                            margin-right: 8px;
                        }
                        .stle{
                            margin-top: 3px;
                            font-size: 14px;
                            color: #b3b3b3;
                            span{
                                float: none;
                                font-size: 12px;
                                color: #b3b3b3;
                                
                            }
                        }
                        .stle1{
                            margin-top: 2px;
                            margin-left: -3px;
                            font-size: 18px;
                            color: #ff9344;
//                          display:inline-block;
                            span{
                                float: right;
                                font-size: 16px;
                                color: #b3b3b3;
//                              display:inline-block;
                                margin-top: 0;
                                margin-right: 8px;
                            }
                        }
                    }
                }
                
                
            }
            .zhuti4-2{
                width: 100%;
                height: 50%;
                background: skyblue;
//              img{
//                  width: px(210px);
//                  height: px(162px);
//                  margin-left: 10px;
//              }
            }
        }

}
footer{
    
    a{
        color: black;
    }
    ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top:5px;            
            .iconfont{
                color: transparent;
                font-size: 30px;
                -webkit-text-stroke: 1px #FF9344;
            }
            &.active .iconfont{
                    color: #FF9344;
                }
            p{
                font-size: px(26px);
            }
            &:hover .iconfont{
            color: yellow;
        }
        }
        
   
}
